<template>
  <a-modal v-model="showUploadLoading" :maskClosable="false" :footer="false" :closable="false" :dialog-style="{ top: '200px' }">
    <p class="export-text" v-if="uploading"><a-spin size="small" /><span>正在导出中...</span></p>
    <p class="export-text" v-else><a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" /><span>导出成功！</span></p>
    <div v-show="!uploading" class="export-btn-box ant-modal-footer">
      <a-button @click="showUploadLoading = false">关闭</a-button>
      <a download :href="file" @click="showUploadLoading = false" class="export-btn ant-btn-primary ant-btn">
        下载
      </a>
    </div>
  </a-modal>
</template>
<script>
export default {
  props: ['showExportModal', 'exportUploading', 'exportFile'],
  data() {
    return {
      showUploadLoading: false,
      uploading: true,
      file: ''
    }
  },
  watch: {
    showExportModal(val) {
      this.showUploadLoading = val
    },
    exportUploading(val) {
      this.uploading = val
    },
    exportFile(val) {
      this.file = val
    }
  }
}
</script>
<style lang="less" scoped>
.export-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  font-size: 18px;
  span {
    margin-left: 12px;
    display: inline-block;
  }
}
.export-btn-box {
  display: flex;
  align-items: center;
  margin: 48px -24px -24px;
  justify-content: flex-end;
  .export-btn {
    display: block;
    margin-left: 12px;
  }
}
</style>
